<template>
  <div class="su-lxDiglog-box" ref="lxDialog">
    <el-dialog title="请选择" :visible.sync="dialogVisible">
      <el-form>
        <el-form-item label="关键字" label-width="80px">
          <el-input placeholder="请输入单据 id" v-model="searchVal" style="width: 300px"></el-input>
          <el-button @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <a-table :cols="cols" :data="data">
        <el-table-column align="center" label="操作" width='150'>
          <template slot-scope="scope">
            <div>
              <el-button size='mini' @click='choose(scope.row.id)'>选择</el-button>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'su-lxDialog',
    data() {
      return {
        cols: [
          {label: '候选项', prop: 'id'},
          {label: '', prop: 'value'}
        ],
        data: [],
        searchVal: '',
        dialogVisible: false
      }
    },

    methods: {
      $show() {
        this.dialogVisible = true
        this.searchVal = ''
        this.$nextTick(() => {
          this.$refs.page.changePage()
        })
      },
      search() {
        this.$refs.page.changePage()
      },
      getData(data) {
        this.data = data
      },
      async fetchData(aPageNum, aPageSize) {
        return this.$api.inventGetCosts({
          aFirmId: this.aFirmId,
          aBillId: this.searchVal || '',
          aPageNum,
          aPageSize
        })
      },
      choose(value) {
        this.$emit('handleLxDialog', value)
      }
    }
  }
</script>
